<template>
  <div v-if="iswhOK" class="login-page" :style="{ width: backgroundWidth + 'px',height:backgroundHeight+'px' }">
    <div class="welcome-message" >欢迎登录信息工程系</div>
    <LoginForm/>
    <!-- 将按钮改为可点击的文字 -->
    <a href="javascript:" @click="RegisterdialogVisible">没有账号？立即注册</a>
    <a href="javascript:" @click="GoStudent">我是学生</a>
    <el-dialog
        title="注册"
        v-model="dialogVisible"
        :style="{ width: 540 + 'px' }"
        @close="dialogVisible = false"
    >

      <RegisterConfirmForm v-if="RegisterConfirmVisible"
                           @register-confirm-event="handleRegisterConfirm" />
      <RegistrationForm
          v-if="RegistrationFormVisible"
          @register="handleRegister"  />
    </el-dialog>

  </div>
</template>

<script setup>

import { ref, onMounted, onBeforeUnmount } from 'vue';
import LoginForm from '@/components/LoginForm.vue';
import RegistrationForm from '@/components/RegistrationForm.vue';
import {ElDialog, ElMessage} from 'element-plus';
import RegisterConfirmForm from "@/components/RegisterConfirmForm.vue";
import router from "@/router/index.js"; // 假设您正在使用Element Plus

// 定义响应式数据
const dialogVisible = ref(false);
const backgroundWidth = ref(0);
const backgroundHeight = ref(0);
const RegistrationFormVisible = ref(false);
const RegisterConfirmVisible = ref(true);
const iswhOK = ref(false);
// 挂载时执行的操作
onMounted(() => {
  updateHeaderWidth();
  window.addEventListener('resize', updateHeaderWidth);
});

// 组件卸载前执行的操作
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateHeaderWidth);
});

// 方法定义
function updateHeaderWidth() {
  // 确保this.$refs.header已经存在
      backgroundHeight.value=window.innerHeight;
      backgroundWidth.value=backgroundHeight.value*(16/9);
      if(backgroundWidth.value<window.innerWidth-10){
        backgroundWidth.value = window.innerWidth;
        backgroundHeight.value=backgroundWidth.value*(9/16);
      }
      iswhOK.value=true;
}

const handleRegister=async (registrationData)=> {
  // ...（与原来相同的逻辑）
  try {
    // 发送注册请求到后端API
    const response = global.jsonApi('/user/register/', JSON.stringify(registrationData));
    const data = await response.json();
    // 检查返回的消息
    if (response.ok) {
      // 注册成功处理，例如跳转到登录页面或显示成功消息等
      this.$message.success('注册成功!');
    } else {
      // 注册失败处理，例如显示错误消息等
      this.$message.error('Registration response failed: ' + data.error);
    }
  } catch (error) {
    ElMessage(
        error.message,
        {
          type: 'error',
          duration: 3000
        }
    );
  }
}


const handleRegisterConfirm=async (confirmData)=>{
  if(confirmData){
    RegistrationFormVisible.value = true;
    RegisterConfirmVisible.value = false;
  }
}

const RegisterdialogVisible=async ()=>{
  dialogVisible.value = true;
  RegistrationFormVisible.value=false;
  RegisterConfirmVisible.value=true;

}
const GoStudent=()=>{
  router.push('/student');
}

</script>

<style scoped>
.login-page {
  position: relative;
  overflow: hidden;
  background: linear-gradient(45deg, #ee7752, #ddc7ce, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: Gradient 5s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@keyframes Gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.welcome-message {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>